body {
  color: #333;
  fill: #333;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #000;
  max-width: 2560px;
  overflow-x: hidden;
  font: 12px microsoft yahei, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.4;
  transform: translateX();
}

/* 轮播图模态框 */
.modal {
  position: fixed;
  z-index: 99998;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;

}

.modal .box {
  width: 80%;
  margin: 0 auto;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  position: relative;
}

.modal .header {
  /* line-height: 40px;
  padding: 0 10px;
  position: relative;
  font-size: 20px; */
  height: 15%;
  padding: .3125vw 0 0;
  border-bottom: 1px solid rgba(0, 195, 255, .1);
  font-size: .625vw;
  text-align: center;
}

.modal .header .title {
  font-size: 1.75vw;
  padding-bottom: .125vw;
  color: #fff;
}

.modal .header .num {
  color: #00c3ff;
  font-size: 1.125vw;
}

.modal .content {
  height: 85%;
  padding: .625vw 0;
  position: relative;
}

.modal .box .content img {
  transform: translateY(-100%);
  z-index: 5;
}

.modal .box a {
  position: absolute;
  top: 50%;
  display: block;
  width: 3.3333vw;
  height: 3.5938vw;
  margin-top: -1.7708vw;
  margin-right: .5208vw;
  margin-left: .5208vw;
}

.modal .box a.prev {
  left: 0;
  background: url(https://overwatch.nosdn.127.net/1/images/heroes/detail/arrow-left.2HQ0H.png);
  background-size: cover;
}

.modal .box a.next {
  right: 0;
  background: url(https://overwatch.nosdn.127.net/1/images/heroes/detail/arrow-right.1hVyK.png);
  background-size: cover;
}

.modal .box .closeBtn {
  position: absolute;
  z-index: 99999;
  top: 2.2604vw;
  right: .2604vw;
  display: block;
  overflow: hidden;
  width: 1.875vw;
  height: 1.875vw;
  transition: opacity .5s ease 0s;
  opacity: .8;
  background: url(https://overwatch.nosdn.127.net/1/images/heroes/detail/exit.3OOEf.png) 0 0 no-repeat;
  background-size: contain;
}


/* 头部视频图片 */
.mediaheader {
  padding-top: 6.25vw;
  padding-bottom: 1.0417vw;
  text-align: center;
  background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Silver_Background.jpg) no-repeat 50% 0;
  padding-top: 6.25vw;
  padding-bottom: 1.0417vw;
}

/* 公共版心 */
.container {
  max-width: 75vw;
  padding-left: 2.0833vw;
  padding-right: 2.0833vw;
  width: 100%;
  margin: 0 auto;
}

.container .texth2 {
  padding-bottom: 2.3438vw;
  padding-top: 2.3438vw;
  font-size: 3.125vw;
  line-height: 3.125vw;
}

/* 中间整体部分 */
.sections {
  background: #215da3 url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Sky.jpg) no-repeat 50% 0;
  margin-top: -1.3021vw;
  overflow: hidden;
  -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
  -webkit-mask-box-image-slice: 20 350 fill;
  -webkit-mask-repeat: no-repeat;
}

/* 视频部分 */
.mediasection {
  padding-top: 4.1667vw;
  padding-bottom: 4.1667vw;

  margin-top: 0.9896vw;
}

.mediasection:nth-child(2n-1) {
  background: linear-gradient(0deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .02)), rgba(0, 0, 0, .08);
  background-blend-mode: color-burn, overlay;

  border-top: 1px solid hsla(0, 0%, 100%, .3);
  border-bottom: 1px solid hsla(0, 0%, 100%, .3);
}

.mediasection-content,
.mediaitems-wrapper {
  position: relative;
  text-align: center;
}

.mediasection-header {
  font-size: 1.875vw;
  line-height: 2.6042vw;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  display: block;
  padding-bottom: 1.6667vw;
  text-align: center;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.9167vw;
  height: 2.9167vw;
  border: 2px solid hsla(0, 0%, 100%, .2);
  border-radius: 50%;
  color: #fff;
}

.carousel-control.previous {
  right: 101%;
}

.carousel-control.next {
  left: 101%;
}

.mediaitems {
  margin-left: -1.0417vw;
  overflow: hidden;
}

.mediaitems .item-wapper {
  display: flex;
  position: relative;
  /* width: 736.7188vw; */
  transition: all .6s;
}

.mediasection .mediaitem {
  width: 25%;
  padding-left: 1.0417vw;
  display: inline-block;
  transition: opacity .4s;
}

/* 内部小盒子 */
.mediaitem .cardlink {
  display: block;
  width: 100%;
  cursor: pointer;
}

.mediaitem .cardlink:hover .top {
  transform: scale(1.1);
}

.csrt {
  overflow: hidden;
}

.mediaitem .cardlink:hover .cardplaybtn {
  background-color: #e66700;
}

.mediaitem .cardlink .top {
  width: 16.9271vw;
  height: 9.5672vw;
  background-color: #f2f1ed;
  background-size: cover;
  position: relative;
  border-radius: 4px;
  transition: all 0.3s;
}

.mediaitem .cardlink .top:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .2);
}

/* 文字 */
.cardbottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

}

.cardbottom .cardcta {
  background-color: #f2f1ed;
  border: 1px solid #f2f1ed;
  border-radius: 2px;
  position: absolute;
  top: -1px;
  left: 1px;
  transform: translateY(-100%);
  align-items: center;
  height: 1.8229vw;
  display: flex;
}

.cardbottom .cardcta .cardplaybtn {
  background-color: #ff8900;
  width: 1.8229vw;
  height: 100%;
  position: relative;
  transition: all 0.3s;

}

.cardplaybtn:after {
  border-width: .3646vw 0 .3646vw .6315vw;
  content: "";
  position: absolute;
  border-color: transparent transparent transparent #f2f1ed;
  border-style: solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cardbottom .cardcta .cardtime {
  padding: 0 .8333vw;
  font-size: .8333vw;
  line-height: .8333vw;
  font-family: FuturaNo2D, Century Gothic, AppleGothic, sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #4b535d;
}


.cardbottom .cardcaption {
  padding: .8333vw .8333vw;
  text-align: left;
  color: #fff;

}

.cardbottom .cardcaption h1 {
  font-size: .9375vw;
  line-height: 1.1458vw;
}

/* 音乐部分 */
.mediaitems .item-wapper-music {
  display: flex;
  position: relative;
  transition: all .6s;
}

.mediaitems .mediaitembox {
  height: 21.1979vw;
}

.mediaitems .mediaitembox .imgbox {
  border-radius: 4px;
  overflow: hidden;
}

.mediaitems .mediaitembox .imgbox img {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.music-hover:hover img {
  transform: scale(1.1);
}

.mediaitems .mediaitembox .pictxt {
  padding: .4167vw .5208vw;
  text-align: left;
  color: #fff;
}

.mediaitems .mediaitembox .pictxt h1 {
  font-size: .9375vw;
  line-height: 1.1458vw;
}

.mediaitems .mediaitembox .pictxt p {
  font-size: .8333vw;
  line-height: 1.25vw;
  color: #f06414;
  display: inline-block;
  padding: .1563vw;
  transition: all 0.3s;
}


.music-hover:hover p {
  color: #fff !important;
  background-color: #f06414;
}

.mediasection .container button {
  margin-top: .7813vw;
  width: 14.0625vw;
  height: 3.75vw;
  font-size: 1.25vw;
  line-height: 3.75vw;
  color: #000;
  font-weight: 700;
  opacity: .9;
  transition: all .2s;
}

.mediasection .container button:hover {
  opacity: 1;
}


/* 长图片 */
.longpic {
  padding-top: 150%;
}

/* 底部背景 */
.bottombg {
  position: relative;
  width: 100%;
  height: 100%;
}

.bottombg::before {
  content: "";
  background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Characters.png) no-repeat 50% 0/cover;
  width: 100%;
  max-width: 1400px;
  height: calc(100% + 3.125vw);
  display: block;
  position: absolute;
  left: 50%;
  top: -3.125vw;
  -webkit-transform: translateX(-50%);
  transform: translate(-50%);
  z-index: 1;
}

.bottombg::after {
  background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Sky.jpg) no-repeat 50% 0/cover;
  margin-top: -0.9896vw;
  width: 100%;
  height: calc(100% + .9896vw);
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.bottombg .closing {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 2600px;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  padding: 4.1667vw 2.0833vw;
}

.bottombg .closing .content {
  width: 100%;
  margin: 0 auto;
}

.bottombg .closing .header {
  position: relative;
  color: #fff;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding-top: 10.4167vw;
  z-index: 2;
}

.bottombg .closing .heading {
  line-height: 3.4375vw;
  font-size: 3.125vw;
  margin-bottom: 1.5625vw;
  font-style: normal;
  font-weight: 700;
}

.bottombg .closing .btn-primary {
  padding: 0 2.0833vw;
  font-size: 1.25vw;
  height: 3.75vw;
  line-height: 3.75vw;
  background-color: #f06414;
  position: relative;
  z-index: 1;
  border-radius: 2px;
  opacity: .9;
  box-shadow: 0 .1042vw .5208vw rgba(0, 0, 0/10%);
  color: #fff;
  display: inline-flex;
}